<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示和隐藏</title>
		<style>
			#d2{
				display: block;
			}
			.c{
				display: block;
				font-size: 60px;
				height: 400px;
				color: red;
				line-height: 400px;
				border-radius: 50px;
				text-align: center;
				border: 5px solid red;
			}
		</style>
		<script>
			window.onload=function(){
				document.getElementById("b1").onmouseover=function(){
					document.getElementById("d1").className="c";
					
					// document.getElementById("d1").style.display="block";
					// document.getElementById("d1").style.fontSize="60px";
					// document.getElementById("d1").style.border="5px solid red";
					// document.getElementById("d1").style.color="red";
					// document.getElementById("d1").style.height="450px";
					// document.getElementById("d1").style.textAlign="center";
					// document.getElementById("d1").style.lineHeight="450px";
					// document.getElementById("d1").style.borderRadius="50px";
					document.getElementById("d2").style.display="none";
				}
			}
		</script>
	</head>
	<body>
		<div id="d1" hidden>
			教育改变生活222
		</div>
		<button type="button" id="b1">隐藏div</button>
		<div id="d2">
			教育改变生活111
		</div>
	</body>
</html>